home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2009 February / PCWFEB09.iso / Software / Resources / Burning & Media / GB-PVR 1.2.13 / GBPVR10213.msi / Cabs.w1.cab / guide.css627 < prev    next >
Text File  |  2008-01-03  |  20KB  |  707 lines
  1. /* 
  2. NOTE:
  3. Because of display glitches in both firefox and IE, using standard borders to display a grid within the listing guide did not always display properly.
  4. Because the cells are not a fixed width and expand and contract, the borders would randomly disappear when resizing the browser, resulting
  5. in some guide cells not having borders at all.
  6. The only cross-browser solution which works is to use a background graphic in each ell to draw the border cells instead.
  7. The graphic must be wide and high enough to accomodate any possible cell dimension. The default image is 2000 pixels wide and 600 pixels
  8. high (I can't imagine anyone having a cell dimension larger than that).
  9.  
  10. When theme designers design a graphical theme, they might want to take this into account when designing their cell background graphic.
  11. If they want a cell border, it will likely need to be graphically implemented. Aimply specifying border values for the cells seems to be
  12. problematic.
  13.  
  14. ADDITIONAL NOTE:
  15. The javascript function which performs the expand/contract feature for each cell relies on specific naming conventions
  16. in order to work. If creating new CSS identifiers, make sure they DO NOT begin with the word 'listing' as this is reserved
  17. for the names of the actual cells to be acted on by the function. Upon page loading, the function parses the entire page for
  18. all elements beginning with the word 'listing' and assigns it a custom event handler.
  19. As well, any new listing types (such as Pending, Deleted, etc.) should be named with the same convention. So if you added a
  20. new listing type of "IMPORTANT", its CSS identifier class should be named 'listingImportant'
  21.  
  22. */
  23.  
  24.  
  25. html {
  26.     overflow-y:hidden;
  27.     overflow-x:hidden;
  28. }
  29.  
  30. #DIV_CONTENTS {
  31.     /* 
  32.     This is the divider line between the header and the content section.
  33.     Specifying any values here will override the default values found in styles.css
  34.     */
  35. }
  36. #TIMELINE_HEADER {
  37.     /*
  38.     Positioning for the fixed row containing the show times along the top of the guide.
  39.     */
  40.     position:absolute; 
  41.     width:100%; 
  42.     height:25px; 
  43.  
  44.     left:0; 
  45.  
  46.     background-color:#dcdcdc;
  47.     color:#000000;
  48.     overflow:hidden;
  49. }
  50. .forcedScrollbar {
  51.     /* 
  52.     This is a surrounding div which forces the showtimes header to display a scrollbar so it will line up with the guide listings.
  53.     Height should be set to more than the height of #TIMELINE_HEADER (100 pixels more should be sufficient)
  54.     With proper z-indexing, doing this ensures a vertical scrollbar will appear. The extra content is simply hidden behind the
  55.     regular content area which has a higher z-index.
  56.     */
  57.     height:125px;
  58.     overflow:scroll;    /* force scrolling */
  59.     background-color:#dcdcdc;
  60.     
  61.     display:inline-block;
  62.     position:relative;
  63.  
  64.     width:100%;
  65.  
  66.     border-width:0;
  67.     padding:0;
  68. }
  69. #BACK_BUTTON A {
  70.     /*
  71.     Styling for the BACK button located in the top left corner of the guide.
  72.     */
  73.     position:absolute;
  74.     width:35px;
  75.  
  76.     /*
  77.     set font size to 0 and move off the screen to hide text and use a graphics-only button
  78.      */
  79.     font-size: 0px;
  80.     text-indent: -9000px;  /* hide the text */
  81.     text-decoration: none;
  82.  
  83.     border-style: solid;
  84.     border-color: #000000;
  85.     float:left;
  86.  
  87.     left:0px;
  88.     top:0px;
  89.  
  90.     margin:0;
  91.     padding:0;
  92.  
  93.     border-width: 0px 1px 0px 1px;
  94.  
  95.     background: #ffcc00 url(../Graphics/back.gif) no-repeat center;
  96. }
  97. #NEXT_BUTTON A {
  98.     /*
  99.     Styling for the NEXT button located in the top right corner of the guide.
  100.     This item needs to be specially positioned to serve a dual purpose.
  101.  
  102.     In order to align the listings columns with the header columns, the header must be forced to show a scrollbar
  103.     so the widths of the 2 areas will be the same (we assume the guide will ALWAYS have a vertical scrollbar).
  104.     However, this leaves a squashed vertical scrollbar at the far right of the header line with contains the show times.
  105.     Aesthetically, this looks bad and can be confusing to the end user to see 2 scrollbars.
  106.  
  107.     So we will use this item as an absolutely positioned button directly over that scrollbar to hide it.
  108.     Because of the way IE and Firefox apply padding and margin settings, we have to tweak these to make sure
  109.     everything aligns perfectly.
  110.     
  111.     Typically this would be the area used for the Next button at the far right of the screen.
  112.     */
  113.     position:absolute;
  114.     width:35px;
  115.  
  116.     /*
  117.     set font size to 0 and move off the screen to hide text and use a graphics-only button
  118.      */
  119.     font-size: 0px;
  120.     text-indent: -9000px;  /* hide the text */
  121.     text-decoration: none;
  122.  
  123.     border-style: solid;
  124.     border-color: #000000;
  125.     float:right;
  126.     right:0px;
  127.  
  128.     /* move it back up and over the header line to cover the scrollbar */
  129.     margin-top:-26px;
  130.     
  131.     border-width: 1px 1px 1px 1px;
  132.  
  133.     background: #ffcc00 url(../Graphics/ahead.gif) no-repeat center;
  134.  
  135.     z-index:9999; /* make sure it appears on top of the scrollbar */
  136. }
  137. #GO_BUTTON A {
  138.     /*
  139.     Styling for the GO button located to the right of the filter dropdown boxes.
  140.     Because of differences in IE and firefox, margin must be tweaked for proper alignment.
  141.     */
  142.  
  143.     /* go button is slightly higher, so vertically align it with the dropdown boxes */
  144.     float:right;
  145.     display:inline-block;
  146.     width:30px;
  147.     height:22px;
  148.  
  149.     margin:-3px 5px 0px 0px;
  150.  
  151.     border: 1px solid #000000;
  152.     background-color: #ffcc00;
  153.     text-align: center;
  154.     line-height:20px;
  155.     vertical-align: middle;
  156.     font-weight: bold;
  157.     font-size: 12px;
  158.     text-decoration:none;
  159. }
  160. #BACK_BUTTON A:active, #NEXT_BUTTON A:active, #GO_BUTTON A:active, #BACK_BUTTON A:visited, #NEXT_BUTTON A:visited, #GO_BUTTON A:visited {
  161.     color: #000000;
  162. }
  163. #BACK_BUTTON A:hover, #NEXT_BUTTON A:hover, #GO_BUTTON A:hover {
  164.     background-color: #ffeaaa;
  165.     text-decoration: none;
  166. }
  167. #FILTERS {
  168.     /* 
  169.     Contains the genre, date, time and go button.
  170.     */
  171.     position: relative;
  172.     left:0;
  173.  
  174.     padding: 11px 0px 0px 0px;
  175.     
  176.     z-index:6;
  177.     
  178.     overflow:hidden;
  179. }
  180. #genreList, #dateJump, #timeJump {
  181.     /* 
  182.     Styling for the individual SELECT areas for the filter
  183.     */
  184.     float:right;
  185.     display: block;
  186.     margin-right:4px;
  187.  
  188.     border: 1px solid #556b2f;
  189.     background: #ece8d0;
  190.     font-size: 1em;
  191. }
  192. .channelInfo, .channelInfoLogoAndText, .channelInfoLogoOnly {
  193.     /* 
  194.     Attributes for the channel cell at the far left of each listing row.
  195.     */
  196.     display:inline-block;
  197.     position:absolute;
  198.  
  199.     border-width:0;
  200.     background: #dcdcdc url(../Graphics/tl.gif) no-repeat;
  201.  
  202.     padding:0px 0px 0px 0px;
  203.  
  204.     color:#000000;
  205.     font-weight:bold;
  206.  
  207.     overflow:hidden;
  208.     vertical-align:middle;
  209.     text-align:center;
  210.  
  211.     z-index:999;
  212. }
  213. .channelInfo {
  214.     padding-top:30px;
  215. }
  216. .channelInfoLogoAndText {
  217.     padding-top:2px;
  218. }
  219. .channelInfoLogoOnly {
  220.     padding-top:5px;
  221. }
  222. .channelInfo A, .channelInfoLogoAndText A,.channelInfoLogoOnly A {
  223.     /* 
  224.     Default styling for the link text in the far left channel cell on each row in the guide.
  225.     These are the text links for the channel name and number.
  226.     */
  227.     color:#000000;
  228.     text-decoration:none;
  229. }
  230. .channelInfo A:active, .channelInfoLogoAndText A:active, .channelInfo A:visited, .channelInfoLogoAndText A:visited {
  231.     color:#000000;
  232. }
  233. .channelInfo A:hover, .channelInfoLogoAndText A:hover {
  234.     color: #0000ff;
  235. }
  236. .channelInfo IMG, .channelInfoLogoAndText IMG, .channelInfoLogoOnly IMG {
  237.     /*
  238.     Ensure black borders for images
  239.     */
  240.     border-color: #000000;
  241. }
  242. .channelLogo {
  243.     /* 
  244.     Styling for the logo in the channel cell.
  245.     The hard-coded HTML for this section will specify a %age width for the IMG tag of the icon.
  246.     This ensures graceful resizing and provides padding on each side of the cell.
  247.     NOTE: Because of CSS limitations and the ability for the user to choose their own row height, it is
  248.     very complicated to try and vertically center this image. It can be done via javascript and DHTML, but
  249.     is probably not worth the effort and extra resources involved.
  250.     */
  251.     display:inline-block;
  252.     overflow:hidden;    /* clip any contents to avoid overflow of icons which don't fit in the cell */
  253. }
  254. .channelName {
  255.     /*
  256.     Styling for the channel name in the far left channel cell for each listing row.
  257.     This would be the style normally used when there is no channel icon displayed.
  258.     */
  259.     font-size:13px;
  260.     font-weight:bold;
  261. }
  262. .channelNumber {
  263.     /*
  264.     Styling for the channel number in the far left channel cell for each listing row.
  265.     This would be the style normally used when there is no channel icon displayed.
  266.     */
  267.     font-size:18px;
  268.     font-weight:bold;
  269. }
  270. .nameAndNumber {
  271.     /*
  272.     Styling for the channel name and number in the far left channel cell for each listing row.
  273.     This would be the style normally used when there is a channel icon displayed as well.
  274.     The name and channel number are placed on one line.
  275.     */
  276.     font-size:13px;
  277.     font-weight:bold;
  278.     margin-bottom:2px;
  279. }
  280. #MANUAL_RECORD A {
  281.     /*
  282.     Styling for the Manual Record button
  283.     */
  284.     float:left;    
  285.     display: inline-block;
  286.  
  287.     height:25px;
  288.  
  289.     position:relative;
  290.     
  291.     border: 1px solid #000000;
  292.     margin: 6px 0px 2px 8px;
  293.     padding: 0px 6px 0px 6px;
  294.     background-color: #9acd32;
  295.  
  296.     text-decoration: none;
  297.     line-height:25px;
  298.     vertical-align:middle;
  299.     font-size: 11px;
  300.     font-weight:bold;
  301.     color: #000000;
  302.     
  303.     white-space: nowrap;
  304.     text-align: center;
  305.  
  306.     overflow: hidden;
  307. }
  308. #MANUAL_RECORD A:active, #MANUAL_RECORD A:visited {
  309.     color: #000000;
  310. } 
  311. #MANUAL_RECORD A:hover {
  312.     color: #000000;
  313.     background-color: #cfe6a1;
  314. }
  315. .timeSlot {
  316.     /*
  317.     Styling for the fixed showtimes header across the top of the guide listing.
  318.     This is an absolutely positioned area. As well, it normally contains the
  319.     BACK and NEXT buttons, so if changing the height of this section you'll also
  320.     need to adjust the dimensions of any other elements contained within.
  321.     */
  322.     display:inline-block;
  323.     position:absolute;
  324.  
  325.     /* IE and firefox interpret the box model differently, so adjustments must be made */
  326.     line-height:9px;
  327.  
  328.     border-width:0;
  329.     background: url(../Graphics/line_left.png) no-repeat;
  330.  
  331.     /* top padding can be adjusted if text is misaligned */
  332.     padding:4px 0px 0px 0px;
  333.  
  334.     overflow:hidden;
  335.     vertical-align:middle;
  336.     font-weight: bold;
  337. }
  338. .time {
  339.     /* styling for the time text along the top of the guide */
  340.     font-size:13px;
  341.     font-weight:bold;
  342.     font-family:Arial,sans-serif;
  343.     vertical-align:middle;
  344.     line-height: 18px;
  345.     padding-left:5px;
  346. }
  347. .guideRow {
  348.     /*
  349.     This is the styling for the containing DIV for each row in the guide.
  350.     */
  351.     width:100%;
  352.     border-width:0;
  353.     padding:0;
  354. }
  355. .listing, .listingPending, .listingInProgress, .listingAvailable, .listingFailed, .listingConflict, .listingReoccurring, .listingDeleted, .expandedListing {
  356.     /* 
  357.     Styling for all the different individual cells in the guide.
  358.     This encompasses the default characteristics of all types of cells.
  359.     Further down, each cell is additionally styled according to its attributes such as a different background color
  360.     for pending, etc.
  361.     */
  362.     display:inline-block;
  363.     position:absolute;
  364.  
  365.     border-width:0;
  366.     background: #ffffff url(../Graphics/tl.gif) no-repeat;
  367.  
  368.     padding:0px 0px 0px 0px;
  369.  
  370.     vertical-align:top;
  371.     text-align:left;
  372.     overflow-x:hidden;
  373.     overflow-y:auto;
  374.  
  375. }
  376. .info {
  377.     /* 
  378.     this is the top line in each listing cell containing the repeat indicator as well as the
  379.     links such as wiki, imdb, etc. It's used to highlight info which the user might want
  380.     to see immediately.
  381.     */
  382.     position:relative;
  383.     display: inline-block;
  384.     
  385.     font-size: 10px;
  386.     line-height:22px;
  387.     vertical-align:middle;
  388.     height:22px;
  389.     width:100%;
  390.     border-bottom: 1px solid #000000;
  391.     
  392.     white-space: nowrap;
  393.     overflow:hidden;
  394.     background: #ffffff url(../Graphics/tl.gif) no-repeat;
  395. }
  396. .info a {
  397.     color: #0000ff;
  398.     text-decoration: none;
  399. }
  400. .info a:visited, .info a:active {
  401.     color: #0000ff;
  402. }
  403. .info a:hover {
  404.     text-decoration: underline;
  405. }
  406. .new_show {
  407.     display: inline-block;
  408.     width:19px;
  409.     height:22px;
  410.     background: url(../Graphics/new.png) no-repeat center;
  411.     float:left;
  412.     margin-left:3px;
  413.     margin-right:20px;
  414.  
  415.     font-size:10px;
  416.     font-weight:bold;
  417.     font-variant: small-caps;
  418.     color: #b22222;
  419.     /* hide the text */
  420.     font-size:0px;
  421.     text-indent: -9000px;  
  422. }
  423. .wiki, .imdb, .tvcom, .netflix {
  424.     display: inline-block;
  425.     height:22px;
  426.     float:left;
  427.     cursor: pointer;
  428.     white-space: nowrap;
  429.     font-size: 10px;
  430.     /* hide the text */
  431.     font-size: 0px;
  432.     text-indent: -9000px;
  433.     margin: 0px 5px 0px 5px;
  434. }
  435. /* This can be considered the start point for turning off the graphics for seach sites.  Just activate the end comment following the .tvcom entry to turn off 
  436. the graphiics.  You will need to remove the end comment line directly below.
  437. */
  438. A.wiki, A.imdb, A.tvcom, A.netflix {
  439.     text-decoration:none;
  440.     color: #0000ff;
  441. }
  442. A:active.wiki, A:active.imdb, A:active.tvcom, A:active.netflix, A:visited.wiki, A:visited.imdb, A:visited.tvcom, A:visited.netflix {
  443.     color: #0000ff;
  444. }
  445. A:hover.wiki, A:hover.imdb, A:hover.tvcom, A:hover.netflix {
  446.     text-decoration: underline;
  447. }
  448.  
  449. .wiki {
  450.     width:41px;
  451.     background: url(../Graphics/wiki.png) no-repeat center;
  452. }
  453. .imdb {
  454.     width:33px;
  455.     background: url(../Graphics/imdb.png) no-repeat center;
  456. }
  457. .netflix {
  458.     width:48px;
  459.     background: url(../Graphics/netflix.png) no-repeat center;
  460. }
  461. .tvcom {
  462.     width:38px;
  463.     background: url(../Graphics/tvcom.png) no-repeat center;
  464. }
  465. /* Add an end comment below to turn off graphic display.  Also remove the end comment found before the A.wiki entry. */
  466.  
  467. .showTitle {
  468.     /* 
  469.     Styling for the show title for a listing
  470.     */
  471.     font-weight: bold;
  472.     padding: 2px 0px 0px 3px;
  473.     float:left;
  474. }
  475. .showTitle A {
  476.     color: #0000ff;
  477.     text-decoration: none;
  478. }
  479. .showTitle A:active, .showTitle A:visited {
  480.     color: #0000ff;
  481. }
  482. .showTitle A:hover {
  483.     color: #0000ff;
  484.     text-decoration: underline;
  485. }
  486. .showSubtitle {
  487.     /* 
  488.     Styling for the show subtitle for a listing
  489.     */
  490. /*    margin: 2px 5px 0px 3px;*/
  491.     padding: 2px 0px 0px 0px;
  492.     text-indent: 3px;
  493.     position:relative;
  494.     
  495.     color: #005501;
  496. }
  497. .showText {
  498.     /* 
  499.     Styling for the main body of text for a listing
  500.     */
  501.     margin: 2px 5px 2px 5px;
  502.     clear:left;
  503. }
  504. .expandedListing {
  505.     /* 
  506.     Styling for the cell which opens when a user double-clicks on a cell in the guide.
  507.     This feature enables users to quickly view the full contents of a cell which may
  508.     be extremely small in the guide with lots of scrolling.
  509.  
  510.     This style is not actually used in the source HTML, but is referred to by the
  511.     javascript function which performs the function.
  512.     
  513.     Technically, this style is temporarily applied to the actual cell that was clicked in order
  514.     to keep it at the same location, but just resize and highlight it.
  515.     
  516.     When closing, the original cell styling is restored.
  517.     This all happens via javascript.
  518.     */
  519.     border: 4px solid #a52a2a;
  520.     z-index: 10001;    /* make sure it covers all other cells */
  521.  
  522.     /* adjust according to default channel cell column width */    
  523.     margin-left: 7%;
  524.     width: 93%;
  525.     
  526.     right:1px;
  527.     
  528.     height:112px;
  529. }
  530. .listingPending {
  531.     background-color: #ffcf9f;
  532. }
  533. .listingInProgress {
  534.     background-color: #3c2;
  535. }
  536. .listingAvailable {
  537.     background-color: #339930;
  538. }
  539. .listingFailed {
  540.     background-color: #fc3;
  541. }
  542. .listingConflict {
  543.     background-color: #f33;
  544. }
  545. .listingReoccurring {
  546.     background-color: #ccc;
  547. }
  548. .listingDeleted {
  549.     background-color: #777;
  550. }
  551. .sep {
  552.     /*
  553.     Separator between links in the lower right of the footer.
  554.     Could also use a background image if desired by moving the text
  555.     off the screen.
  556.     */
  557.     padding-left:5px;
  558.     padding-right:5px;
  559. }
  560. #HIDDEN_TEXT {
  561.     /*
  562.     Hidden section used for custom javascript manipulation.
  563.     Can be used for anything.
  564.     */
  565.     position: absolute;
  566.     top: -9000px;
  567.     left: -9000px;
  568.     width: 0px;
  569.     height: 0px;
  570. }
  571.  
  572. /*
  573. #loading {
  574.     position:absolute;
  575.     top:0px;
  576.     left:0px;
  577.     width:100%;
  578.     height:100%;
  579.     z-index:10000;
  580.     font-size: 48px;
  581.     font-weight:bold;
  582.     text-align: center;
  583.     padding-top:20%;
  584.     background-color: #ffffff;
  585. }
  586. */
  587.  
  588. /*
  589. *********************************************************************************************************************
  590. Absolute Positioning and Height                                                            
  591.  
  592. These values are consolidated into one place to make it easier to change size attributes seeing as changing
  593. any one of these values can affect all the others. Main declarations for these values appear earlier in the style sheet
  594. and then actual positioning values here.
  595.  
  596. These values are the key to maintaining proper size, positioning and scrolling behavior.
  597. *********************************************************************************************************************
  598. */
  599.  
  600. BODY {
  601.     /*
  602.     In order to maintain proper positioning and fixed scrolling, these values must be specified.
  603.     In effect, this absolutely positions the main body within the borders of the scrolling area.
  604.     Top value is the same as the top value of #CONTENTS.
  605.     Bottom value would be the height of the footer area minus the height of the divider    for the footer.
  606.     */
  607.     margin-top:158px;
  608.     margin-bottom:49px;
  609. }
  610. #HEADER {
  611.     /* 
  612.     The height of the entire header area from page top to the bottom of the navigation tabs.
  613.     The actual nav tabs are floated within this div.
  614.     */
  615.     height:92px;
  616. }
  617. #NAV_ROW {
  618.     /* 
  619.     The is the row containing the navigation tabs.
  620.     It is typically positioned at the bottom of the header
  621.     */
  622.     top:62px;
  623. }
  624. #NAV_ROW, #NAV_ROW A {
  625.     /* determines the height of the main navigation tabs */
  626.     height:32px;
  627. }
  628. #DIV_DATELINE {
  629.     /*
  630.     This is the divider line between the main header above and the section containing the server time
  631.      */
  632.     top:91px;
  633. }
  634. #DATELINE {
  635.     /* 
  636.     This is the section containing the server time, date, etc.
  637.     */
  638.     top:92px;
  639. }
  640. #REMINDER_DIV, #FILTERS, #DATELINE {
  641.     /* Height of these individual elements would normally be the same as #DATELINE */
  642.     /*    Contains the Genre, date, time and GO button.*/
  643.     height:40px;
  644. }
  645. #TIMELINE_HEADER {
  646.     /* 
  647.     This section contains the main, non-scrolling timeline at the top of the content section.
  648.     */
  649.     top:133px;
  650.     height:25px;
  651. }
  652. #NEXT_BUTTON A, #BACK_BUTTON A, .timeSlot {
  653.     /* 
  654.     Setting height for these values determines the height of the showtime header row as well as the
  655.     next and back buttons
  656.     */
  657.     height:25px;
  658. }
  659. #DIV_CONTENTS {
  660.     /*
  661.     This is A divider line between any fixed top section within the content area and the content itself.
  662.     This is typically used in the guide page to separate the showtime header from the content.
  663.     In other pages which don't need this functionality it can simply be hidden.
  664.      */
  665.     top:158px;
  666. }
  667. #CONTENTS {
  668.     /* 
  669.     This is the main content area.
  670.     To ensure proper scrolling behavior it MUST be absolutely positioned.
  671.     Both top and bottom values must be specified.
  672.     Top value would be the height of all foxed content above it.
  673.     Bottom value would be the height of the footer area minus the height of the divider    for the footer.
  674.     Values must be tweaked due to differences in how IE and Firefox interpret the box model.
  675.      */
  676.     top:158px;
  677.     bottom:47px;
  678.     overflow-x:hidden;
  679. }
  680. #DIV_FOOTER {
  681.     /* 
  682.     The divider between the main content area and the footer.
  683.     It must be absolutely positioned.
  684.     The bottom value would typically be the same as the height of the footer
  685.     */
  686.     bottom:50px;
  687. }
  688. #FOOTER {
  689.     /* 
  690.     Fixed area at the bottom of every page. This must be absolutely posiitioned for proper scrolling
  691.     Certain content will always be contained in this section such as standard GB-PVR documentation links and credits,
  692.     but it contains and left and right section which can be customized on each page.
  693.     
  694.     If the size of the footer changes make sure to adjust the content area's bottom value as well as the
  695.     divider section for the footer.
  696.     */
  697.     height:50px;
  698. }
  699. .guideRow, .channelInfo, .channelInfoLogoAndText, .channelInfoLogoOnly, .channelLogo, .listing, .listingPending, .listingInProgress, .listingAvailable, .listingFailed, .listingConflict, .listingReoccurring, .listingDeleted {
  700.     /*
  701.     The following value determines row height for the guide listings.
  702.     All these values must be changed for proper display.
  703.     Must specify an actual pixel value as specifying a % does not work in Firefox.
  704.     */
  705.     height:120px;
  706. }
  707.